import { RepoLink } from 'libframe-docs/components/RepoLink'

## Without pre-rendering

Without [pre-rendering](/pre-rendering), we can simply determine the locale at the `vite-plugin-ssr` server middleware:

```js
const renderPage = createPageRenderer(/* ... */)

// `vite-plugin-ssr` server middleware
app.get('*', async (req, res) => {
  let { url } = req
  const { locale, urlWithoutLocale } = extractLocale(url)

  // We set `pageContext.url` to `urlWithoutLocale` instead of `req.url`.
  // So that the locale `/en-US/` in the URL is stripped away.
  url = urlWithoutLocale

  const pageContext = {
    url,
    // We make `locale` available to pages as `pageContext.locale`
    locale
  }
  const result = await renderPage(pageContext)

  /* ... */
})

// We usually use a library instead of implementing our own locale retrieval mechanism
function extractLocale(url) {
  // We determine the locale, for example:
  //  extractLocale('/en-US/film/42').locale === 'en-US'
  //  extractLocale('/de-DE/film/42').locale === 'de-DE'
  const locale = /*...*/

  // We may also strip the language URL pathname, for example:
  //  extractLocale('/en-US/film/42').urlWithoutLocale === '/film/42'
  //  extractLocale('/de-DE/film/42').urlWithoutLocale === '/film/42'
  //  ...
  urlWithoutLocale = /*...*/

  return { locale, urlWithoutLocale }
}
```

We can then make `pageContext.locale` available to all our components, see [Access `pageContext` anywhere](/pageContext-anywhere).

This technique also works with:

- `Accept-Language: fr` headers
- `?lang=fr` query parameters
- `domain.fr` domain TLDs

Example:
- <RepoLink path='/examples/i18n/' />


## With pre-rendering

When using [pre-rendering](/pre-rendering),
we can use the hooks `onBeforeRoute()` and `onBeforePrerender()`.

```js
// _default.page.route.js

export { onBeforeRoute }

function onBeforeRoute(pageContext) {
  let { url } = pageContext

  const { urlWithoutLocale, locale } = extractLocale(url)
  url = urlWithoutLocale

  return {
    pageContext: {
      // We make `locale` available as `pageContext.locale`.
      // We can then use https://vite-plugin-ssr.com/pageContext-anywhere
      // to access `pageContext.locale` in any React/Vue component.
      locale,
      // We overwrite the original URL
      url
    }
  }
}
```

```js
// _default.page.server.js

export { onBeforePrerender }

function onBeforePrerender(globalContext) {
  const prerenderPageContexts = []
  globalContext.prerenderPageContexts.forEach((pageContext) => {
    prerenderPageContexts.push({
      ...pageContext,
      locale: localeDefault
    })
    // We add the localized pages to the list of pages that are going to be pre-rendered
    locales
      .filter((locale) => locale !== localeDefault)
      .forEach((locale) => {
        prerenderPageContexts.push({
          ...pageContext,
          url: `/${locale}${pageContext.url}`,
          locale
        })
      })
  })
  return {
    globalContext: {
      prerenderPageContexts,
    }
  }
}
```

Example:
- <RepoLink path='/examples/i18n-prerender/' />
